<template>
    <canvas class="cstarLine" :class="cls" 
        :width="W"
        :height="H"
    />
</template>

<script>
export default {
    name: 'cstarLine',
    props: {
        cls: {
            default: 'canvas'
        },
        W: {default: 1200},
        H: {default: 900},
    },
    data() {
        return {
            canvas: {
                dom: null,
                stage: null,
                
            },
            stars: [], // 点点的位置
            fps: 20, 
            starNum: 20, // 点的数量
        }
    },
    mounted() {
        // this.setDom()
        // this.initStars()
        // this.draw()
    },
    methods: {
        e_mouseMove(e) {
            console.log(e)
        },
        setDom() {
            let dom = document.querySelector(this.cls)
            this.canvas.dom = dom
            let stage = dom.getContext('2d')
            this.canvas.stage = stage
            stage.fillStyle = 'rgba(0,0,0,0.3)'
        },
        initStars() {
            for (let i = 0; i < this.starNum; i++) {
                let r = 1
                let x = Math.random() * this.W | 0
                let y = Math.random() * this.H | 0
                let ranSpeed = (n = 5) => {
                    let ran = (Math.random() * n | 0) - (n / 2 | 0)
                    if (ran === 0) {
                        ran = -1
                    }
                    return ran
                }
                let speedx = ranSpeed()
                let speedy = ranSpeed()
                let newStar = {
                    x,
                    y,
                    r,
                    speedx,
                    speedy,
                }
                this.stars.push(newStar)
            }
        },
        draw() {
            let c = this.canvas.stage
            let ss = this.stars
            let ani = setInterval(() => {
                // c.clearRect(0, 0, this.W, this.H)
                c.fillStyle = '#21263f6a'
                c.fillRect(0, 0, this.W, this.H)
                c.fillStyle = 'rgba(255, 255, 255, 0.2)'
                let len = ss.length
                for (let i = 0; i < len; i++) {
                    const a = ss[i]
                    let handlePosition = (a, c, b) => {
                        a += c
                        if (a < 0) {a += b}
                        a %= b
                        return a | 0
                    }
                    a.x = handlePosition(a.x, a.speedx, this.W)
                    a.y = handlePosition(a.y, a.speedy, this.H)

                    let cr = new Path2D()
                    let {r, x, y} = a
                    cr.arc(x, y, r, 0, Math.PI * 2, false)
                    c.fill(cr)
                }
            }, 1000 / this.fps)
        }
        // initStars() {
        //     let c = this.canvas.stage
        //     let ps = this.positions
        //     let len = ps.length
        //     for (let i = 0; i < 20; i++) {
        //         const a = ps[i]
        //         let cr = new Path2D()
        //         let r = a.r
        //         let x = a.x
        //         let y = a.y
        //         cr.arc(x, y, r, 0, Math.PI * 2, false)
        //         c.fill(cr)
        //     }
        // },
        // drawLines() {

        // },
    }
}
</script>

<style scoped>
    .cstarLine {
        z-index: -1;
    }
</style>
